<template>
	<view class="container">
		<!-- 视频播放 -->
		<view class="video-container">
			<video v-if="isVideo" @error="videoError" class="activity-video"
				:src="httpResources(activity.shipinwenjian)" autoplay loop></video>
			<image v-else class="activity-img" :src="httpResources(activity.shipinwenjian)" mode="widthFix"></image>
		</view>

		<!-- 活动封面图 -->
		<!-- <image class="activity-cover" :src="`http://localhost:8888${activity.fengmiantupian}`" mode="aspectFill" /> -->

		<!-- 活动标题 -->
		<view class="activity-title">{{ activity.shipinmingcheng }}</view>

		<!-- 活动地点 -->
		<view class="activity-location">
			<text class="location-label">类别：</text>
			<text class="location-value">{{ activity.leibie }}</text>
		</view>

		<!-- 评论部分 -->
		<view class="comments">
			<view class="comment-title">评论区</view>
			<view v-for="(comment, index) in comments" :key="index" class="comment">
				<view class="comment-author">{{ comment.xingming }}</view>
				<view class="comment-time">{{ comment.createTime }}</view>
				<view style="margin: 0rem auto">
					<u-rate :count="count" v-model="comment.pingfen" disabled></u-rate>
				</view>
				<view class="comment-content">{{ comment.pingyu }}</view>
				<!-- 回复部分 -->
				<view v-if="comment.huifu" class="reply">
					<text class="reply-author">工作人员:</text>
					<text class="reply-content">{{ comment.huifu }}</text>
				</view>
			</view>

			<!-- 输入框和提交评论按钮 -->
			<view style="margin: 1rem auto">
				<u-rate :count="count" v-model="pingfen"></u-rate>
			</view>
			<view class="comment-input">
				<input v-model="newComment" placeholder="请输入评论..." class="comment-text" />
				<button @click="submitComment" class="submit-btn">提交评论</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getProductList,
		onFavorite,
		pinglunList,
		addpinglun,
		baoming,
	} from '@/request/API/xinwentongzhi/index'

	import {
		httpResources
	} from "@/tool/index.js"
	export default {
		data() {
			return {
				// 模拟活动数据
				activity: {},
				count: 5,
				pingfen: 3,
				obj: {},
				// 假数据: 评论区数据
				comments: [],
				// 新评论的内容
				newComment: '',
				isVideo: true,
			}
		},
		methods: {
			httpResources(path) {
				return httpResources(path)
			},
			videoError() {
				this.isVideo = false
			},
			pinglunList(id) {
				pinglunList({
					shipinId: id,
				}).then((res) => {
					this.comments = res.list
				})
			},
			// 提交评论
			submitComment() {
				if (this.newComment.trim() === '') {
					uni.showToast({
						title: '评论不能为空',
						icon: 'none',
					})
					return
				}
				addpinglun({
					...this.activity,
					yonghuming: this.obj.yonghuming,
					xingming: this.obj.xingming,
					pingyu: this.newComment,
					pingfen: this.pingfen,
				}).then((res) => {
					this.pinglunList(this.activity.id)
					this.newComment = '' // 清空输入框
				})
				// const newCommentObj = {
				// 	author: '用户', // 假设是当前登录的用户
				// 	time: this.formatDate(new Date()),
				// 	content: this.newComment,
				// 	replies: []
				// };

				// 将新评论添加到评论区
				// this.comments.push(newCommentObj);
			},

			onFavorite() {
				onFavorite({
						shangpinxinxiID: this.activity.id,
						userId: this.obj.id,
					})
					.then((res) => {
						if (res.code == '0') {
							// 收藏成功，显示成功提示
							uni.showToast({
								title: '收藏成功',
								icon: 'success', // 显示成功图标
								duration: 2000, // 提示框持续时间（2秒）
							})
						} else {
							// 收藏失败，显示失败提示
							uni.showToast({
								title: '收藏失败',
								icon: 'none', // 显示没有图标的提示
								duration: 2000, // 提示框持续时间（2秒）
							})
						}
					})
					.catch((error) => {
						// 网络或其他异常错误
						uni.showToast({
							title: '操作失败，请稍后再试',
							icon: 'none',
							duration: 2000,
						})
						console.error(error)
					})
			},
			generateRandomNumber() {
				// 生成一个长度为 10 的随机数字字符串
				return Math.random().toString().slice(2, 12) // 获取小数点后 10 位的数字
			},
			// 点击参加按钮的事件
			onJoinClick(seat) {
				uni.navigateTo({
					url: `/pages/qingxi/addTie?seat=${JSON.stringify(this.activity)}`,
				})
			},
			getProductList(id) {
				getProductList({
					id,
				}).then((res) => {
					this.activity = res.list.find(item=>item.id==id)
					console.log(res)
					this.pinglunList(this.activity.id)
				})
			},
		},
		onLoad(options) {
			// 假设 id 是通过上一页面传递的
			const activityId = options.id
			// 在这里可以根据 activityId 获取接口数据

			console.log('接收到的活动 ID:', activityId)
			this.getProductList(activityId)
			this.obj = uni.getStorageSync('user')
		},
	}
</script>

<style scoped>
	/* 视频容器 */
	.video-container {
		width: 100%;
		margin-bottom: 20px;
		border-radius: 14px;
		overflow: hidden;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
	}

	/* 视频播放器 */
	.activity-video {
		width: 100%;
		height: 300px;
		/* 可根据需要调整高度 */
		background-color: #000;
		/* 默认背景色 */
	}

	.activity-img {
		width: 100%;
	}

	/* 页面容器 */
	.button-container {
		display: flex;
		justify-content: space-around;
		margin-top: 10px;
	}

	.action-button {
		width: 45%;
		/* padding: 10px 20px; */
		font-size: 16px;
		background-color: #007bff;
		color: white;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}

	.action-button:hover {
		background-color: #0056b3;
	}

	.post-detail {
		font-family: 'Helvetica', sans-serif;
		background-color: #f5f5f5;
		padding: 1rpx;
	}

	.post-title {
		background-color: #ffffff;
		padding: 15px;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		color: #333;
	}

	.info {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
	}

	.author,
	.time {
		font-size: 14px;
		color: #888;
	}

	.post-content {
		background-color: #ffffff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		margin-bottom: 40px;
		/* 增加评论区和帖子之间的距离 */
	}

	.post-image {
		width: 100%;
		border-radius: 8px;
		margin-bottom: 15px;
	}

	.content {
		font-size: 16px;
		line-height: 1.6;
		color: #555;
	}

	/* 评论区部分 */
	.comments {
		background-color: #ffffff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		margin-top: 40px;
	}

	.comment-title {
		font-size: 20px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
	}

	.comment {
		border-bottom: 1px solid #f1f1f1;
		padding-bottom: 15px;
		margin-bottom: 15px;
	}

	.comment-author {
		font-weight: bold;
		color: #333;
	}

	.comment-time {
		font-size: 12px;
		color: #aaa;
		margin-left: 10px;
	}

	.comment-content {
		margin-top: 10px;
		font-size: 14px;
		color: #555;
		line-height: 1.5;
	}

	.reply {
		margin-left: 20px;
		margin-top: 10px;
		font-size: 14px;
		color: #777;
	}

	.reply-author {
		font-weight: bold;
		color: #333;
	}

	.reply-content {
		margin-left: 5px;
		color: #555;
	}

	/* 输入框部分 */
	.comment-input {
		display: flex;
		/* flex-direction: column; */
		justify-content: space-between;
		margin-top: 30px;
	}

	.comment-text {
		font-size: 16px;
		padding: 12px;
		margin-bottom: 15px;
		border: 1px solid #ddd;
		border-radius: 8px;
		background-color: #f9f9f9;
		color: #333;
	}

	.submit-btn {
		background-color: #4caf50;
		margin: 0;
		color: #fff;
		font-size: 16px;
		padding: 10px;
		border: none;
		border-radius: 8px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.submit-btn:hover {
		background-color: #45a049;
	}

	.container {
		padding: 8rpx 11rpx;
		background-color: #f9f9f9;
		border-radius: 12px;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
		max-width: 650px;
		margin: 0 auto;
		overflow: hidden;
	}

	/* 活动封面图 */
	.activity-cover {
		width: 100%;
		height: 260px;
		border-radius: 14px;
		margin-bottom: 30px;
		overflow: hidden;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
	}

	/* 活动标题 */
	.activity-title {
		font-size: 42rpx;
		font-weight: 700;
		color: #333;
		margin-bottom: 18px;
		/* text-align: center; */
		line-height: 1.4;
	}

	/* 活动时间和地点 */
	.activity-time,
	.activity-location {
		margin-bottom: 18px;
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
	}

	.time-label,
	.location-label {
		font-size: 28rpx;
		color: #7f8c8d;
		font-weight: 500;
		width: 22%;
	}

	.time-value,
	.location-value {
		font-size: 28rpx;
		color: #2d3436;
		font-weight: 600;
	}

	/* 活动描述 */
	.activity-description {
		margin-bottom: 35px;
	}

	.description-label {
		font-size: 28rpx;
		color: #7f8c8d;
		font-weight: 500;
		margin-bottom: 8px;
	}

	.description-value {
		font-size: 28rpx;
		color: #2d3436;
		line-height: 1.8;
		font-weight: 400;
		letter-spacing: 0.5px;
	}

	/* 参与按钮 */
	.activity-button {
		display: flex;
		justify-content: center;
	}

	.btn {
		background-color: #1abc9c;
		color: white;
		font-size: 22px;
		/* padding: 16px 36px; */
		border-radius: 10px;
		width: 73%;
		text-align: center;
		border: none;
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
		transition: background-color 0.3s, -webkit-transform 0.3s;
		transition: background-color 0.3s, transform 0.3s;
		transition: background-color 0.3s, transform 0.3s, -webkit-transform 0.3s;
	}

	.btn:hover {
		background-color: #16a085;
		transform: translateY(-2px);
		cursor: pointer;
	}
</style>